<template>
  <div class="bgff p20" style="min-height:100%;box-sizing:border-box;">
    <el-form
      :model="form"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      style="width:500px;"
    >
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          :action="image_url"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <div class="imgbox">
            <img v-if="form.avatar" :src="form.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="form.nickname" :disabled="!isEdit" placeholder="用户昵称" maxlength="10"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="form.username" disabled placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.phone" disabled placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱">
        <el-input v-model="form.email" disabled placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="form.address" :disabled="!isEdit" placeholder="详细地址" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="用户类型">
        <em v-text="form.level">1</em>
      </el-form-item>
      <el-form-item label="所属部门">
        <em v-text="form.dept.name">所属组织结构</em>
      </el-form-item>
      <el-form-item label="所属岗位">
        <em v-text="form.job.name">所属岗位</em>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="large" @click="editInfo">{{!isEdit?'修改信息':'保存信息'}}</el-button>
        <el-button type="primary" size="large" @click="editPassword">修改密码</el-button>
      </el-form-item>
    </el-form>
    <password ref="password_"></password>
  </div>
</template>

<script>
import uploadurl from "@/http/uploadconfig";
import password from "./modul/password"; // ES6 Module
import { _userLevel, _chartProfile } from "@/http/ajax";
export default {
  components: { password },
  data() {
    return {
      image_url: uploadurl.image_url,
      form: {
        username: "",
        avatar: "",
        job: { name: "" },
        dept: { name: "" }
      },
      isEdit: false
    };
  },
  created() {
    this.getData();
  },
 
  methods: {
    editPassword() {
      const _this = this.$refs.password_;
      _this.dialog = true;
    },
    editInfo() {
      if (this.isEdit) {
        let data = {
          nickname: this.form.nickname,
          phone: this.form.phone,
          email: this.form.email,
          address: this.form.address,
          avatar: this.form.avatar
        };
        _chartProfile(
          data,
          res => {
            this.$notify({
              title: "操作成功",
              duration: 2000
            });
            this.isEdit = !this.isEdit;
            this.getData();
          },
          err => {}
        );
      } else {
        this.$store.dispatch("touxiang", 'arr');
        console.log(this.$store)
        this.isEdit = !this.isEdit;
      }
    },
    getData() {
      let id = JSON.parse(sessionStorage.user).id || 0;
      _userLevel(
        id,
        res => {
          $('#user-right-avatar').attr('src',res.avatar)
          this.form = res;
          this.form["level"] =
            {
              1: "尊古-超级管理员",
              2: "合作商",
              3: "职能部门",
              4: "技术人员",
              5: "普通用户"
            }[sessionStorage.level] || "未知用户类型";
          sessionStorage.user = JSON.stringify(res);
        },
        err => {}
      );
    },
    handleAvatarSuccess(res, file) {
      let data = {
        avatar: res.data[0],
        nickname: this.form.nickname || "",
        phone: this.form.phone || "",
        email: this.form.email || "",
        address: this.form.address || ""
      };
      _chartProfile(
        data,
        res => {
          this.$notify({
            title: "操作成功",
            duration: 2000
          });
          this.getData();
        },
        err => {}
      );
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return  isLt2M;
    }
  }
};
</script>

<style scoped lang="scss">
.imgbox {
  width: 60px;
  height: 60px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    border-radius: 100px;
    overflow: hidden;
  }
  &:after {
    position: absolute;
    content: "";
    background: url(http://img3.zugiot.cn/1565337968851_wx17aa476b91c2a391.o6zAJs3b6tdnxGVzjkF4tM0s0yjc.XIvxMM6vCSwp22c9671c671d1126f4fa605974a7b698.png)
      no-repeat;
    width: 23px;
    height: 23px;
    bottom: 0;
    right: 0;
    background-size: 100% 100%;
  }
}
</style>
